import React, { useEffect, useState } from 'react'
import { Ajax } from '../../api/api'
import MyHead from '../../components/MyHead'
import { useDispatch, useSelector } from 'react-redux';
import { changeCity, getCityListAsync } from '../../rtk/modules/data';
import { IndexBar, List, SearchBar, Empty, Image } from 'antd-mobile'
import './index.scss'
import { useNavigate } from 'react-router-dom';


const City = () => {
    const router = useNavigate()
    const dispatch: any = useDispatch()
    const city = useSelector((state: any) => state.data.city)
    const cityList = useSelector((state: any) => state.data.cityList)
    const [clist, setClist] = useState<any>([])
    const [toggle, setToggle] = useState<boolean>(true)

    useEffect(() => {
        if (cityList.length == 0) {
            dispatch(getCityListAsync({
                params: {},
                headers: { 'X-Host': 'mall.film-ticket.city.list' }
            }))
        }
    }, [dispatch])
    const getRandomList = (min: number, max: number): string[] => {
        return new Array(Math.floor(Math.random() * (max - min) + min)).fill('')
    }
    const charCodeOfA = 'A'.charCodeAt(0)
    const groups = Array(26)
        .fill('')
        .map((_, i) => ({
            title: String.fromCharCode(charCodeOfA + i),
            items: []
        }))

    const chooseCity = (value: any) => {
        dispatch(changeCity(value))
        router(-1)
    }

    const onCancel = () => {
        setToggle(true)
        setClist([])
    }

    const onSearch = (value: any) => {
        console.log(value)
        const list = cityList.filter((item: any) => (item.pinyin.indexOf(value) > -1 || item.name.indexOf(value) > -1))
        setToggle(false)
        setClist([...list])
        console.log(list)
    }
    return (
        <div className='pg'>
            <MyHead title={city ? '所在城市 - ' + city.name : '选择城市'} />

            <div className='searchbar' >
                <SearchBar onCancel={onCancel} onSearch={onSearch} placeholder='请输入搜索关键字' showCancelButton={() => true} />
            </div>
            {
                toggle ?
                    <div className="allcity">
                        <IndexBar sticky={true}>
                            {groups.map(group => {
                                const { title, items } = group
                                return (
                                    <IndexBar.Panel
                                        index={title}
                                        title={title}
                                        key={title}
                                    >
                                        <List>
                                            {
                                                cityList.filter((value: any, index: any) => value.pinyin.indexOf(title.toLowerCase()) == 0).map((v: any, i: any) => (
                                                    <List.Item key={i} onClick={() => chooseCity(v)}>
                                                        {v.name}
                                                    </List.Item>
                                                ))
                                            }
                                        </List>
                                    </IndexBar.Panel>
                                )
                            })}
                        </IndexBar>
                    </div>
                    :
                    <div className="clist allcity">
                        {
                            clist.length > 0 ?
                                <List>
                                    {
                                        clist.map((v: any, i: any) => (
                                            <List.Item key={i} onClick={() => chooseCity(v)}>
                                                {v.name}
                                            </List.Item>
                                        ))
                                    }
                                </List>
                                :
                                <div className="empty">
                                    <Empty
                                        style={{ padding: '64px 0' }}
                                        image={
                                            <Image src="" />
                                        }
                                        description='没有找到匹配的城市'
                                    />
                                </div>
                        }
                    </div>
            }

        </div>
    )
}

export default City